<template>
  <div class="list">
    <div
      class="item"
      v-for="(item, index) of newsList"
      :key="index"
    >
      <div class="tit">{{ item.title }}</div>
      <div class="desc">{{ item.desc }}</div>
    </div>
  </div>
</template>

<script>
import { computed, ref, onMounted } from "vue"
import { useStore } from "vuex"

export default {
  name: "MHome",
  setup() {
    const page = ref(1)
    const store = useStore()
    store.dispatch("news/getNewsListAction", { page: page.value })

    onMounted(() => {
      window.addEventListener("scroll", function() {
        let sT = document.documentElement.scrollTop
        let cH = document.documentElement.clientHeight
        let sH = document.documentElement.scrollHeight

        if (sT + cH >= sH) {
          console.log("加载下一页")
          page.value += 1
          store.dispatch("news/getNewsListAction", { page: page.value })
        }
      })

      /*document.querySelector(".list").addEventListener('click', function() {
        console.log(this)
      })*/
    })

    return {
      newsList: computed(() => store.state.news.newsList)
    }
  }
};
</script>

<style scoped lang="less">
.list {
  padding: .1rem;

  .item {
    border-bottom: 1px solid #aaa;
    padding-bottom: .1rem;
    margin-bottom: .1rem;
  }

  .tit {
    font-size: .5rem;
  }

  .desc {
    font-size: .3rem;
  }
}
</style>
